<template>
	<view class="cardStyleWp">
		<view class="card">
			<!-- 企业认证标识 -->
			<view class="authStatusWp redCode" v-if="userInfo.authStatus==2">
				<view class="mark " style="color:red;">
					未通过企业认证
				</view>
			</view>

			<view class="top u-flex">
				<view class="left u-flex">
					<view>
						<u--image v-if="userInfo.head" :src="userInfo.head" mode="" width="96rpx"
							height="96rpx"></u--image>
						<u--image v-else src="https://file.casugn.com/storecompcard/temp/avatar_1683680677336.png"
							width="96rpx" height="96rpx"></u--image>
					</view>
					<view class="nameWp">
						<view class="name">
							<text class="u-line-1">{{userInfo.name?userInfo.name:'姓名'}}</text>
						</view>
						<view class="title">
							<text class="u-line-1"> {{userInfo.position?userInfo.position:'职位'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="middle">
				<view class="company">
					<text class="u-line-1">{{userInfo.company?userInfo.company:'公司名称'}}</text>
				</view>
				<view class="line-box">
					<img class="line"
						src="https://file.casugn.com/storecompcard//RPfDmhmgQFXO22885d3528559bfd4955491740360887_1665387214366.png"
						alt="">
				</view>
			</view>
			<view class="bottom">
				<view class="infoItem">
					<u--image src="https://file.casugn.com/storecompcard/temp/general／phone@2x(1)_1681184151521.png"
						alt="" width="32rpx" height="32rpx"></u--image>
					<view class="text">
						{{userInfo.mobile?userInfo.mobile:'手机'}} {{userInfo.wechat?`/ ${userInfo.wechat}`:''}}
					</view>
				</view>
				<view class="infoItem">
					<u--image src="https://file.casugn.com/storecompcard/temp/general／email@2x(1)_1681184368772.png"
						alt="" width="32rpx" height="32rpx"></u--image>
					<view class="text">
						{{userInfo.mail?userInfo.mail:'邮箱'}}
					</view>
				</view>
				<view class="infoItem">
					<u--image
						src="https://file.casugn.com/storecompcard/temp/general／location@2x(1)_1681184390942.png"
						alt="" width="32rpx" height="32rpx"></u--image>
					<view class="text">
						{{userInfo.address?userInfo.address:'联系地址'}}
					</view>
				</view>
			</view>

		</view>
		<view class="reviewMark reviewMarkDark" hover-class="reviewMarkHover" @click="goToPreviewMyPage"
			v-if="showReviewMark">
			预览
		</view>

	</view>
	</view>
</template>

<script>
	export default {
		name: "cardStyle",
		data() {
			return {};
		},
		props: {
			userInfo: {
				type: Object,
				default: () => {},
				required: true
			},
			showReviewMark: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			goToPreviewMyPage() {
				this.$emit('goToPreviewMyPage')
			}
		}
	}
</script>
<style lang="scss" scoped>
	.redCode {
		right: 51rpx !important;
		top: 2rpx !important;
	}

	.cardStyleWp {
		margin: 0 auto;
		position: relative;
		overflow: hidden;
		width: 686rpx;
		height: 412rpx;
		border-radius: 16rpx;
		box-shadow: 2px 2px 5px 0px rgba(104, 99, 254, 0.2);
		z-index: 2;
		background-color: #fff;

		.reviewMark {
			position: absolute;
			right: 10upx;
			top: 10upx;
			font-size: 24rpx;
			padding: 24rpx 24rpx 24rpx 0;
			color: #C9CDD4;
		}

		.reviewMarkDark {
			color: #adb0b6 !important;
		}

		.reviewMarkHover {
			color: #eee;
		}

		.top {
			height: 140upx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.left {
				margin-top: 30rpx;
				margin-left: 30rpx;
				display: flex;

				.nameWp {
					max-width: 500rpx;
					margin-left: 20upx;
					display: flex;
					align-items: center;

					.name {
						font-size: 40upx;
						font-weight: 600;
						color: #1D2129;
					}

					.title {
						align-self: flex-end;
						margin-left: 40upx;
						font-size: 22upx;
						font-weight: 400;
						color: #1D2129;
						margin-bottom: 20rpx;
					}
				}
			}

			.right {
				margin-top: 40upx;
				margin-right: 40upx;

			}
		}

		.middle {
			height: 36upx;

			.company {
				margin-left: 30upx;
			}

			.line-box {
				height: 20upx;
				position: relative;

				.line {
					width: 100%;
					height: 10upx;
				}

				.right {
					min-width: 120rpx;
					width: 120rpx;
					height: 120rpx;
					margin-right: 20upx;
					position: absolute;
					top: -35upx;
					right: 20upx;

					img {
						width: 100%;
						height: 100%;
					}

					.card-btm-img1 {
						position: absolute;
						width: 110rpx;
						height: 110rpx;
						top: 5rpx;
						left: 5rpx;
					}
				}
			}


		}

		.bottom {
			margin-top: 64upx;
			padding-bottom: 30upx;
			margin-left: 30upx;

			.infoItem {
				display: flex;
				margin-bottom: 24rpx;

				.imgs {
					width: 32rpx;
					height: 32rpx;
				}

				.text {
					margin-left: 16rpx;
					max-width: 600rpx;
					font-size: 24rpx;
				}


			}

		}

		//企业认证标识
		.authStatusWp {
			position: absolute;
			right: 38upx;
			top: 5upx;
			height: 30upx;
			width: 30upx;
			text-align: center;
			font-size: 18upx;


			.mark {
				color: #6863fe;
			}

		}

		.roleIdentifyWp {
			position: absolute;
			right: 6upx;
			top: 0upx;
			overflow: hidden;
			text-align: center;
			font-size: 20upx;
			transform: rotate(-33deg);
			width: 30upx;

			.mark {
				color: #6863fe !important;
			}

			.isSuper {
				// background-color: #FD4C00 !important;
				color: #FD4C00 !important;
			}
		}


	}
</style>